<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>DailyThinkingApp</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<!-- <link rel="stylesheet" href="css/reset.css" /> -->
<link rel="stylesheet" href="css/DailyThinkingApp.css" />
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
	<div id="AppBody">
		<div data-role="page" id="one">
			<div data-role="header">
				<h1>Multi-page</h1>
			</div>

			<div data-role="content">
				<ul id="dailyThinkingList"> </ul>
				<h3>Show internal pages:</h3>
				<p>
					<a href="#two" data-role="button">Show page "two"</a>
				</p>
				<p>
					<a href="#popup" data-role="button" data-rel="dialog"
						data-transition="pop">Show page "popup" (as a dialog)</a>
				</p>
			</div>
			<!-- /content -->

			<div data-role="footer" data-theme="d">
				<div data-role="navbar" data-iconpos="right">
					<ul>
						<li><a href="#one" data-icon="grid" >每日一思</a></li>
						<li><a href="#" data-icon="star" class="ui-btn-active">发展报告</a></li>
						<li><a href="#" data-icon="gear">精彩分享</a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->
		</div>


		<!-- Start of second page: #two -->
		<div data-role="page" id="dailyThinking" data-theme="a">

			<div data-role="header">
				<h1>Two</h1>
			</div>
			<!-- /header -->

			<div data-role="content" data-theme="a">
				<h2>Two</h2>
				<p>I have an id of "two" on my page container. I'm the second
					page container in this multi-page template.</p>
				<p>
					Notice that the theme is different for this page because we've
					added a few
					<code>data-theme</code>
					swatch assigments here to show off how flexible it is. You can add
					any content or widget to these pages, but we're keeping these
					simple.
				</p>
				<p>
					<a href="#one" data-direction="reverse" data-role="button"
						data-theme="b">Back to page "one"</a>
				</p>

			</div>
			<!-- /content -->

			<div data-role="footer">
				<div data-role="navbar" data-iconpos="right">
					<ul>
						<li><a href="#one" data-icon="grid" >每日一思</a></li>
						<li><a href="#" data-icon="star" class="ui-btn-active">发展报告</a></li>
						<li><a href="#" data-icon="gear">精彩分享</a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->
		</div>

		<!-- Start of third page: #popup -->
		<div data-role="page" id="popup">
			<div data-role="header" data-theme="e">
				<h1>Dialog</h1>
			</div>
			<!-- /header -->

			<div data-role="content" data-theme="d">
				<h2>Popup</h2>
				<p>
					I have an id of "popup" on my page container and only look like a
					dialog because the link to me had a
					<code>data-rel="dialog"</code>
					attribute which gives me this inset look and a
					<code>data-transition="pop"</code>
					attribute to change the transition to pop. Without this, I'd be
					styled as a normal page.
				</p>
				<p>
					<a href="#one" data-rel="back" data-role="button"
						data-inline="true" data-icon="back">Back to page "one"</a>
				</p>
			</div>
			<!-- /content -->

			<div data-role="footer">
				<h4>Page Footer</h4>
			</div>
			<!-- /footer -->
		</div>
		<!-- /page popup -->

	</div>
	<div id="AuthBody" style="display: none">
		<div id="loginForm">
			用户名:<br /> <input type="text" id="usernameInputField" /><br /> 密码:<br />
			<input type="password" id="passwordInputField" /><br /> <input
				type="button" id="loginButton" value="Login" />
		</div>
	</div>
	<script src="js/DailyThinkingApp.js"></script>
	<script src="js/messages.js"></script>
	<script src="js/auth.js"></script>
</body>
</html>